<script>
import { ref } from 'vue';
import { ElButton } from 'element-plus';

export default {
  setup() {
    const counter = ref(0);
    console.log( counter );
    console.log( counter.value );

    const increase = () => counter.value++

    // 返回值会暴露给模板和其他的选项式API钩子
    return {
      counter,
      increase
    }
  },
  components: {
    ElButton
  },
  mounted() {
    console.log( this );
    console.log( 'counter:', this.counter );
    console.log( 'increase:', this.increase );
  }
};
</script>

<template>
  <div>
    <p>使用 setup 函数</p>
    <el-button type="primary" @click="increase">{{counter}}</el-button>
  </div>
</template>
